<!-- 点更多对应的菜单 -->
<template>
  <v-contextmenu ref="contextMenuRef">
    <v-contextmenu-item>
      <div class="contextmenu-item" @click="emits('menuPlay')">播放</div>
    </v-contextmenu-item>
    <v-contextmenu-item>
      <div class="contextmenu-item">下一首播放</div>
    </v-contextmenu-item>
    <v-contextmenu-item>
      <div class="contextmenu-item" @click="emits('love')">我喜欢</div>
    </v-contextmenu-item>
    <v-contextmenu-item>
      <div class="contextmenu-item">添加到</div>
    </v-contextmenu-item>
    <v-contextmenu-item>
      <div class="contextmenu-item">移动到</div>
    </v-contextmenu-item>
    <v-contextmenu-item>
      <div class="contextmenu-item">查看评论</div>
    </v-contextmenu-item>
    <v-contextmenu-item>
      <div class="contextmenu-item" @click="emits('delete')">删除</div>
    </v-contextmenu-item>
    <v-contextmenu-item>
      <div
        class="contextmenu-item"
        @click="
          copyText(`歌曲名：${item.name}，歌手名：${item.singerName}，专辑名：${item.albumName}`)
        "
      >
        复制歌曲信息
      </div>
    </v-contextmenu-item>
  </v-contextmenu>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { copyText } from '@/utils'
  import { onClickOutside } from '@vueuse/core'
  // eslint-disable-next-line no-undef
  defineOptions({
    name: 'MoreContextMenu'
  })

  defineProps<{
    item: any
  }>()

  interface EventClient {
    top: number
    left: number
  }
  const emits = defineEmits(['menuPlay', 'delete', 'love'])

  const contextMenuRef = ref<any>(null)
  const show = (data: EventClient) => {
    contextMenuRef.value.show(data)
  }

  onClickOutside(contextMenuRef, () => contextMenuRef.value.hide())

  defineExpose({
    show
  })
</script>

<style lang="scss" scoped>
  .contextmenu-item {
    width: 110px;
    height: 22px;
    line-height: 22px;
  }
</style>
